<template>
	<div>

		<div class="app-container">

			<TopInfo />

			<Search :lookup="data.lookup" @investigate="inves" />

			<div>
				<el-button v-prmis="'orders_unclaimed_export'" type="primary" size="small">
					<template #default>
						<span class="text-sm" @click="getspread">{{ $t('public.export') }} Excel</span>
					</template>
				</el-button>
			</div>

		</div>

		<div class="app-container" v-loading="data.mtloading">

			<el-table :data="data.list" :header-cell-style="{ 'text-align': 'center' }"
				:cell-style="{ 'text-align': 'center' }" class="w-full">

				<el-table-column type="expand">
					<template #default="props">
						<el-table :data="props.row.details" :header-cell-style="{ 'text-align': 'center' }"
							:cell-style="{ 'text-align': 'center' }" class="w-full">

							<el-table-column prop="sku" label="SKU" show-overflow-tooltip>
								<template #default="scope">
									{{ scope.row.sku || '--' }}
								</template>
							</el-table-column>

							<el-table-column prop="channel_code" :label="$t('order.consume.slot')" show-overflow-tooltip>
								<template #default="scope">
									{{ scope.row.channel_code || '--' }}
								</template>
							</el-table-column>

							<el-table-column prop="retail_price" :label="$t('order.goods.unitPrice')" show-overflow-tooltip>
								<template #default="scope">
									{{ scope.row.retail_price || '--' }}
								</template>
							</el-table-column>

							<el-table-column prop="Open_img" :label="$t('eventlog.nottaken.openDoor')">
								<template #default="scope">
									<el-image :src="scope.row.Open_img || imagesMap['product']" class="w-10 h-10 mr-2"
										@click="getimg(scope.row.Open_img)" />
								</template>
							</el-table-column>

							<el-table-column prop="shut_img" :label="$t('eventlog.nottaken.afterDoor')">
								<template #default="scope">
									<el-image :src="scope.row.shut_img || imagesMap['product']" class="w-10 h-10 mr-2"
										@click="getimg(scope.row.shut_img)" />
								</template>
							</el-table-column>

							<el-table-column prop="duration" :label="$t('eventlog.nottaken.duration')">
								<template #default="scope">
									{{ getPlevel.gettohms(scope.row.duration) }}
								</template>
							</el-table-column>

							<el-table-column prop="transfer_time" :label="$t('date.tradingHours')" show-overflow-tooltip>
								<template #default="scope">
									{{ getPlevel.gettime(scope.row.transfer_time, 3) }}
								</template>
							</el-table-column>

							<el-table-column prop="remark" :label="$t('order.consume.remark')" show-overflow-tooltip>
								<template #default="scope">
									{{ scope.row.remark || '--' }}
								</template>
							</el-table-column>

						</el-table>
					</template>
				</el-table-column>

				<el-table-column prop="trade_no" :label="$t('marketing.preferential.orderCode')" show-overflow-tooltip>
					<template #default="scope">
						{{ scope.row.trade_no || '--' }}
					</template>
				</el-table-column>

				<el-table-column prop="machine_id" :label="$t('machine.code')" show-overflow-tooltip>
					<template #default="scope">
						{{ scope.row.machine_id || '--' }}
					</template>
				</el-table-column>

				<el-table-column prop="g_name" :label="$t('machine.goods.name')" show-overflow-tooltip>
					<template #default="scope">
						{{ scope.row.g_name || '--' }}
					</template>
				</el-table-column>

				<el-table-column prop="is_match" :label="$t('eventlog.nottaken.match')">
					<template #default="scope">
						<el-tag v-if="scope.row.is_match == 1" type="success">{{$t('public.yes')}}</el-tag>
						<el-tag v-else type="danger">{{$t('public.no')}}</el-tag>
					</template>
				</el-table-column>

				<el-table-column prop="is_claim" :label="$t('eventlog.nottaken.Pickup')">
					<template #default="scope">
						<el-tag v-if="scope.row.is_claim == 1" type="success">{{$t('public.yes')}}</el-tag>
						<el-tag v-else type="danger">{{$t('public.no')}}</el-tag>
					</template>
				</el-table-column>

				<el-table-column prop="is_out" :label="$t('eventlog.nottaken.Shipment')">
					<template #default="scope">
						<el-tag v-if="scope.row.is_out == 1" type="success">{{$t('public.yes')}}</el-tag>
						<el-tag v-else type="danger">{{$t('public.no')}}</el-tag>
					</template>
				</el-table-column>

				<el-table-column prop="is_close" :label="$t('eventlog.nottaken.shut')">
					<template #default="scope">
						<el-tag v-if="scope.row.is_close == 1" type="success">{{$t('public.yes')}}</el-tag>
						<el-tag v-else type="danger">{{$t('public.no')}}</el-tag>
					</template>
				</el-table-column>

				<el-table-column prop="status" :label="$t('public.state')">
					<template #default="scope">
						<el-tag v-if="scope.row.status == 1" type="warning">{{ $t('eventlog.nottaken.not') }}</el-tag>
						<el-tag v-if="scope.row.status == 2" type="success">{{ $t('eventlog.nottaken.cleared') }}</el-tag>
						<el-tag v-if="scope.row.status == 3" type="info">{{ $t('eventlog.nottaken.cancelled') }}</el-tag>
					</template>
				</el-table-column>

				<el-table-column :label="$t('public.operate')" width="180">
					<template #default="scope">
						<el-button v-prmis="'orders_unclaimed_operation'" size="small" type="warning"
							:disabled="scope.row.status == 1 ? false : true"
							@click="operation(scope.row.su_id, 2)">{{ $t('public.clean') }}</el-button>
						<el-button v-prmis="'orders_unclaimed_operationt'" size="small" type="danger"
							:disabled="scope.row.status == 1 ? false : true"
							@click="operation(scope.row.su_id, 3)">{{ $t('public.revoke') }}</el-button>
					</template>
				</el-table-column>

			</el-table>

			<PageNum :total="data.total" :page="data.notaken" @exposeData="current" @fraction="fraction" />

		</div>


		<el-dialog v-model="data.demonstrate" center width="30%">
			<div class="text-center">
				<el-image class="max-w-80" :src="data.file_path" fit="fill" />
			</div>
		</el-dialog>

		<el-dialog v-model="data.dialogVisible" :title="$t('order.consume.remark')" center width="30%">
			<div class="text-center">
				<el-form :model="data.auditing" ref="ruleFormRef">
					<el-form-item :label="$t('order.consume.remark')+':'" prop="remark">
						<el-input v-model="data.auditing.remark" :autosize="{ minRows: 10 }" resize="none"
							type="textarea" :placeholder="$t('message.pleaseEnter')" />
					</el-form-item>

					<el-form-item>
						<div class="w-full text-center">
							<el-button type="primary" @click="submit">{{ $t('public.save')}}</el-button>
							<el-button @click="data.dialogVisible = false">{{ $t('public.cancel')}}</el-button>
						</div>
					</el-form-item>

				</el-form>
			</div>
		</el-dialog>
		<exports :dialogVisible="dialogExport" @close="dialogExport = false"/>
	</div>
</template>

<script lang="ts" setup>
import { useI18n } from 'vue-i18n' 
const { t: $t } = useI18n()
import TopInfo from '@/components/TopInfo/index.vue';
import Search from '@/components/Search/index.vue';
import PageNum from '@/components/PageNum/index.vue';
import getPlevel from '@/utils/level'
import imagesMap from '@/assets/images_Js.ts';
import { getunclaimedList, operunclaimedation, exportunclaimed } from '@/api/eventlog';
import { ElMessage, ElMessageBox } from "element-plus";
import exports from '@/components/export.vue';
const dialogExport = ref(false)

let data = reactive({
	mtloading: false, // 加载
	demonstrate: false, // 弹窗
	dialogVisible: false, // 操作弹窗
	file_path: '', // 图片链接
	lookup: [ // 筛选栏
		{ title: $t('marketing.preferential.orderCode'), type: 'input', value: '', key: 'trade_no' },
		{ title: $t('machine.code'), type: 'mId', value: '', key: 'm_id' },
		{ title: $t('eventlog.nottaken.code'), type: 'input', value: '', key: 'channel_code' },
		{ title: $t('machine.goods.name'), type: 'input', value: '', key: 'g_name' },
	],
	list: [], // 列表信息
	auditing: { // 清除/撤销
		su_id: '',
		status: '',
		remark: '',
	},
	notaken: { // 筛选数据
		trade_no: '',
		m_id: '',
		channel_code: '',
		g_name: '',
		page: 1,
		pageNum: 15
	},
	total: 0, // 总条数
})

// 获取列表信息
let getlist = () => {
	data.mtloading = true
	getunclaimedList(data.notaken).then(res => {
		data.mtloading = false
		if (res.state == 200) {
			for (let item of res.data.data) {
				let imgurl = ['', '']
				if (item.deliver_pics != '') {
					imgurl = item.deliver_pics.split(',')
				}

				item.details = [{
					channel_code: item.channel_code,
					duration: item.duration,
					transfer_time: item.transfer_time,
					Open_img: imgurl[0],
					shut_img: imgurl[1],
					remark: item.remark
				}]

			}
			data.list = res.data.data
			data.total = res.data.total
		}
	})
}

// 清除/撤销
let operation = (e, k) => {
	data.auditing.su_id = e
	data.auditing.status = k
	data.auditing.remark = ''
	data.dialogVisible = true
}

// 清除/撤销 - 提交
let submit = () => {
	ElMessageBox.confirm($t('message.isModify'))
		.then(res => {
			operunclaimedation(data.auditing).then(res => {
				if (res.state == 200) {
					ElMessage({
						message: $t('message.setSuccess'),
						type: 'success'
					})
					data.dialogVisible = false
					getlist()
					return
				}
				ElMessage({
					message: $t('message.networkFailed'),
					type: 'error'
				})
			})
		}).catch(err => {
			console.log('取消')
		})

}

// 导出excel
let getspread = () => {
	let obj = {
		trade_no: data.notaken.trade_no,
		m_id: data.notaken.m_id,
		channel_code: data.notaken.channel_code,
		g_name: data.notaken.g_name,
	}

	ElMessageBox.confirm($t('message.isExport')).then(res => {
		exportunclaimed(obj).then(res => {
			if (res.state == 200) {
				dialogExport.value = true
				return
			}

			ElMessage({
				message: $t('message.networkFailed'),
				type: 'error'
			})
		}).catch(err => {
			console.log(err)
		})
	})

}

// 查询回调
let inves = (e) => {
	for (let key in e) {
		data.notaken[key] = e[key]
	}
	data.notaken.page = 1
	data.notaken.pageNum = 15
	getlist()
}

// 查看图片
let getimg = (e) => {
	if (e == '') {
		ElMessage({
			message: $t('message.unViewPic'),
			type: 'error'
		})
		return
	}
	data.demonstrate = true
	data.file_path = e
}

// 页数回调
let current = (e) => {
	data.notaken.page = e
	getlist()
}

// 条数回调
let fraction = (e) => {
	data.notaken.pageNum = e
	getlist()
}

getlist()

</script>
